import React from "react";
import { Card, Row, Col, Button } from "antd";
import { history } from "umi";

const HomePage: React.FC = () => {
  const testPages = [
    { title: "基础用法", path: "/basic", desc: "测试 useRequest 的基本功能" },
    {
      title: "手动触发",
      path: "/manual",
      desc: "测试 manual 参数，手动控制请求",
    },
    {
      title: "轮询",
      path: "/polling",
      desc: "测试 pollingInterval 参数，自动轮询",
    },
    {
      title: "防抖",
      path: "/debounce",
      desc: "测试 debounceWait 参数，防抖处理",
    },
    { title: "缓存", path: "/cache", desc: "测试 cacheKey 参数，缓存机制" },
    { title: "刷新", path: "/refresh", desc: "测试 refresh 相关功能" },
  ];

  return (
    <div style={{ padding: "24px" }}>
      <h1>ahooks useRequest 测试项目</h1>
      <p>这个项目用于测试 ahooks 的 useRequest 各项参数和功能</p>

      <Row gutter={[16, 16]}>
        {testPages.map((page) => (
          <Col xs={24} sm={12} md={8} key={page.path}>
            <Card
              title={page.title}
              extra={
                <Button type="primary" onClick={() => history.push(page.path)}>
                  进入测试
                </Button>
              }
            >
              <p>{page.desc}</p>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default HomePage;
